<template>
  <a-drawer
    title="罚没记录"
    :visible="visible"
    :destroyOnClose="true"
    :width="600"
    @close="handleClose"
  >
    <div class="content">
      <a-table
        :dataSource="recordList?.length ? recordList : sourceData"
        :columns="columns"
        :pagination="false"
        :rowKey="(r, i) => i"
      >
        <template #bodyCell="{ text, record, index, column }">

          <template v-if="column.key === 'action'">
            <a-popconfirm
              title="确定要取消此罚没?"
              @confirm="onDelete(index)"
            >
              <a-button
                type="link"
                danger
              >取消</a-button
              >
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </div>
  </a-drawer>
</template>

<script>
import {
  defineComponent,
  reactive,
  watch,
  toRefs,
  computed,
  toRaw,
  createVNode,
} from "vue";
import { Modal, Form, message } from "ant-design-vue";
import _ from "lodash";
import request from "@/common/utils/request";



export default defineComponent({
  name: "ForfeitRecordDrawer",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    viewType: {
      type: String,
      default: '',
    },
    recordList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    contractId:  {
      type: [Number, String],
      default: 0,  // 合同id
    },
    billId: {
      type: [Number, String],
      default: 0,  // 账单id
    }
  },
  components: { },
  setup(props, { emit }) {

    const state = reactive({
      columns: [],
      sourceData: [],
    });

    const onDelete = (index) => {
      props.recordList.splice(index, 1);
      emit('deleteOk');
    };

    const handleClose = () => {
      emit('handleClose');
    };

    const getDetail = () => {
      request.get('/org', "/bill/billConfiscationsDetail", {contract_id: props.contractId, bill_id: props.billId}).then((res) => {
        state.sourceData = res?.list || [];
      })
    };

    const init = () => {
      if (props.contractId && props.billId) {
        getDetail();
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
          if (props.viewType !== 'edit') {
            state.columns = _.cloneDeep(COLUMNS).filter((v) => v.key !== 'action')
          } else {
            state.columns = _.cloneDeep(COLUMNS)
          }
        } else {
          state.sourceData = [];
        }
      }
    );

    return {
      ...toRefs(state),
      COLUMNS,
      onDelete,
      handleClose,
    };
  },
});

const COLUMNS = [
  {
    title: "罚没金额",
    dataIndex: "amount",
    key: "amount",
    width: "20%",
  },
  {
    title: "罚没费用类型",
    dataIndex: "cost_type_txt",
    key: "cost_type_txt",
  },
  {
    title: "罚没原因",
    dataIndex: "reason",
    key: "reason",
    width: "35%",
    customRender: ({ text, record, index }) => {
      return text ? text : "--";
    },
  },
  {
    title: "操作",
    key: "action",
  },
];
</script>

<style lang="less" scoped>
.content {
  height: 100%;
  overflow: hidden auto;
}
</style>
